<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="建材库" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="content-item">
				<u-search
					height="68" 
					search-icon-color="#A0A0A0"
					placeholder-color="#A0A0A0" 
					:show-action="false" 
					action-text="搜索" 
					:animation="true"
					v-model="searchValue"></u-search>
			</view>
			<view class="content-item swiper-content">
				<u-swiper :list="bannerlist" mode="round" indicator-pos="bottomCenter" border-radius="20" height="320"></u-swiper>
			</view>
			<view class="content-item">
				<u-divider border-color="#E6E6E6" fontSize="30" color="#232323">厂家直供</u-divider>
			</view>
			<view class="content-item building-content">
				<view 
					class="list-item flex justify-between align-center"
					v-for="(item,index) in building_list"
					:key="index"
					@click="show_mask = true"
				>
					<view class="img-box">
						<image :src="item.image" mode="aspectFill" class="img"></image>
					</view>
					<view class="right-cont flex align-center justify-center">
						<text class="text-tipc">{{item.name}}</text>
						<u-icon name="arrow-right" color="#232323" size="24"></u-icon>
					</view>
				</view>
			</view>
			<!-- 弹窗 -->
			<u-mask :show="show_mask">
				<view class="warp">
					<view class="mask-content bg-img">
						<view class="mask-box">
							<view class="text-them text-center">暂未开放 敬请期待</view>
							<view class="text-them margin-top-sm text-center"><text class="f22">您是否想要此功能？</text></view>
							<view class="margin-top-sm">
								<u-radio-group size="24"  active-color='#7C633F' @change="radioChange" class="flex justify-center">
									<u-radio label-size="24" name="非常需要">非常需要</u-radio>
									<u-radio label-size="24" name="需要">需要</u-radio>
									<u-radio label-size="24" name="不需要">不需要</u-radio>
								</u-radio-group>
							</view>
							<view class="btn-box">
								<view class="mask-btn" @click="show_mask = false">确认</view>
							</view>
						</view>
					</view>
					<u-icon name="close-circle" color="#ffffff" size="50" @click="show_mask = false"></u-icon>
				</view>
			</u-mask>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchValue:"",
			bannerlist:["/static/img/banner_jck.png","/static/img/banner_jck.png"],
			building_list:[{
				image:"/static/img/list_jck.png",
				name:"地板",
			},{
				image:"/static/img/list_jck2.png",
				name:"瓷砖",
			},{
				image:"/static/img/list_jck3.png",
				name:"墙面材料",
			},{
				image:"/static/img/list_jck4.png",
				name:"集成吊顶",
			},{
				image:"/static/img/list_jck5.png",
				name:"灯具",
			},{
				image:"/static/img/list_jck6.png",
				name:"家具",
			},{
				image:"/static/img/list_jck7.png",
				name:"门窗",
			},{
				image:"/static/img/list_jck8.png",
				name:"卫浴",
			},{
				image:"/static/img/list_jck9.png",
				name:"家电",
			}],
			show_mask:false,
		};
	},
	onShow() {
		
	},
	onLoad(e) {},
	methods: {
		radioChange(e){
			//console.log(e);
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box {

}

.content_box {
	.swiper-content{
		padding-top: 0;
	}
	.building-content{
		.list-item{
			background: #f7f7f7;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.img-box{
				width: 452rpx;
				height: 140rpx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.right-cont{
				width: 33%;
				.text-tipc{
					margin-right: 14rpx;
				}
			}
		}
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		.mask-content{
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210619135313.png);
			background-size: 100%;
			width: 70%;
			min-height: 650rpx;
			.mask-box{
				position: relative;
				top: 250rpx;
				padding: 30rpx;
				.text-them{
					color: #7c633f;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					line-height: 50rpx;
				}
				.btn-box{
					margin-top: 30rpx;
					text-align: center;
					.mask-btn{
						background: #ec7066;
						border-radius: 40rpx;
						padding: 20rpx 86rpx;
						color: white;
						font-size: 28rpx;
						text-align: center;
						display: inline-block;
					}
				}				
			}
		}
	}
}
</style>
